<template>
<div>
  <!--  分割线-->
  <el-divider></el-divider>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="formInline.arcValues"></el-input>
    </el-form-item>
    <el-form-item>
      <el-select v-model="formInline.arcOptions" placeholder="请选择搜索对象">
        <el-option label="--请选择搜索对象--" value="-1"></el-option>
        <el-option label="档案名称" value="recordName"></el-option>
        <el-option label="借档人" value="borrowFilePeople"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="formInline.borrowStatus" placeholder="请选择归还状态">
        <el-option label="--请选择归还状态--" value="-1"></el-option>
        <el-option label="已归还" value="Y"></el-option>
        <el-option label="未归还" value="N"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="formInline.arcDates" placeholder="借出/归还时间排序">
        <el-option label="--请选择排序方式--" value="-1"></el-option>
        <el-option label="借出时间从低到高" value="jiechu1"></el-option>
        <el-option label="借出时间从高到低" value="jiechu2"></el-option>
        <el-option label="归还时间从低到高" value="guihuan1"></el-option>
        <el-option label="归还时间从高到低" value="guihuan2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" plain @click="getRecordArchiveslibrary">查询</el-button>
      <el-button type="primary" plain @click="insertBut">添加</el-button>
      <el-button type="primary" plain @click="deletesRecordArc">批量删除</el-button>
      <el-button type="primary" plain @click="exportBut">导出</el-button>
    </el-form-item>
  </el-form>
  <el-table
      :data="recordArcData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55"
        align="center">
    </el-table-column>
    <el-table-column
        prop="caseNo"
        label="案号">
    </el-table-column>
    <el-table-column
        prop="recordNum"
        label="档案号">
    </el-table-column>
    <el-table-column
        prop="recordName"
        label="档案名称">
    </el-table-column>
    <el-table-column
        prop="borrowFilePeople"
        label="借档人">
    </el-table-column>
    <el-table-column
        prop="borrowDate"
        label="借出时间">
    </el-table-column>
    <el-table-column
        prop="giveBackDate"
        label="归还时间">
    </el-table-column>
    <el-table-column
        prop="borrowStatus"
        :formatter="Status"
        label="归还状态">
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注">
    </el-table-column>
    <el-table-column
        label="操作">
      <template slot-scope="scope">
        <el-dropdown trigger="click">
          <el-button size="small" type="primary" plain>
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="deleteRecordArchiveslibrary(scope.row.id)">删除</el-dropdown-item>
            <el-dropdown-item @click.native="updateRec(scope.row.id)">修改</el-dropdown-item>
            <el-dropdown-item @click.native="updateY(scope.row.id)">设为已归还</el-dropdown-item>
            <el-dropdown-item @click.native="updateN(scope.row.id)">设为未归还</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
  <!--    分页-->
  <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :page-sizes="[2, 4, 6, 8]"
      :total="pageData.total"
      :page-size="formInline.pageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "RecordArchiveslibrary.vue",
  data(){
    return{
      recordArcData:[],//档案借阅表格
      pageData:{},//存储返回的分页数据
      sels: [],//选中的值显示
      formInline:{//高级查询档案借阅表格
        arcValues:'',
        arcOptions:'',
        arcDates:'',
        pageId: 1,
        pageNum: 2,
    },
    }
  },
  created() {
    this.getRecordArchiveslibrary();
  },
  methods:{
    //高级查询档案借阅表
    getRecordArchiveslibrary() {
      this.$http.get('recordArchiveslibrary', {params: this.formInline})
          .then((res) => {
            this.recordArcData = res.data.data.list;//查询出来的数据
            this.pageData = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //删除员工信息
    deleteRecordArchiveslibrary(ids) {
      this.$http.delete(`recordArchiveslibrary/${ids}`)
          .then(() => {
            this.$notify({
              type: "success",
              message: "删除已归还借阅的档案"
            }),
                this.getRecordArchiveslibrary()
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //批量删除
    deletesRecordArc(){
      var ids = this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
      this.deleteRecordArchiveslibrary(ids);
    },
    //获取选中的数据
    handleSelectionChange(sels) {
      this.sels = sels;
    },
    //修改
    updateRec(id){
      this.$router.push({name:"InsertRecordArchiveslibrary",params: {id: id}})
    },
    //修改状态为Y
    updateY(id){
      this.$http.put(`recordArchiveslibrary` ,{id:id,borrowStatus:'Y'})
          .then(() =>{
                this.$message({
                  type:"success",
                  message:"修改成功"
                }),
                    this.getRecordArchiveslibrary()
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //修改状态为N
    updateN(id){
      this.$http.put(`recordArchiveslibrary` ,{id:id,borrowStatus:'N'})
          .then(() =>{
                this.$message({
                  type:"success",
                  message:"修改成功"
                }),
                    this.getRecordArchiveslibrary()
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //跳转添加页面
    insertBut(){
      this.$router.push('InsertRecordArchiveslibrary')
    },
    //导出
    exportBut(){
      require.ensure([],() => {
        const {export_json_to_excel} = require('../../zxl/excel/Export2Excel.js');
        const tHeader = ['案号', '档案号', '档案名称','借档人','借出时间','归还时间','归还状态','备注'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['caseNo', 'recordNum', 'recordName','borrowFilePeople','borrowDate','giveBackDate','borrowStatus','remark'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.recordArcData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '![列表excel](https://img-blog.csdnimg.cn/20200807112909345.gif)');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    //显示几页
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getRecordArchiveslibrary();
    },
    //每页显示几条
    handleCurrentChange(val) {
      this.formInline.pageId = val;
      this.getRecordArchiveslibrary();
    },
    //状态
    Status(row) {
      return row.borrowStatus == 'Y' ? "已归还" : "未归还"
    },
  }
}
</script>

<style scoped>

</style>